<template>
  <div>
    <el-card>
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="mini"
        label-width="200px"
      >
        <el-row :gutter="6">
          <el-col :span="9">
            <el-form-item label="日期范围" prop="dateRange">
              <el-date-picker
                type="daterange"
                v-model="dateRange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                range-separator="至"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上午时间范围" prop="morning">
              <el-time-picker
                is-range
                :picker-options="{
                  selectableRange: ['00:00 - 12:00', '00:00 - 12:00'],
                }"
                style="width: 100%"
                format="HH:mm"
                value-format="HH:mm"
                v-model="morning"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                range-separator="至"
                clearable
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="6">
          <el-col :span="9">
            <el-form-item label="去除法定节假日" prop="noHoliday">
              <el-radio-group v-model="formData.noHoliday" @change="change">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下午时间范围" prop="afternoon">
              <el-time-picker
                style="width: 100%"
                is-range
                :picker-options="{
                  selectableRange: ['12:00 - 24:00', '12:00 - 24:00'],
                }"
                format="HH:mm"
                value-format="HH:mm"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                range-separator="至"
                clearable
                v-model="afternoon"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="6">
          <el-col :span="9">
            <el-form-item
              label="粒度人数上限"
              prop="numLimit"
              label-width="200px"
            >
              <el-input-number
                v-model="formData.numLimit"
                :min="1"
                :max="9999"
                label="描述文字"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="时间粒度(分钟)" prop="unit">
              <el-select
                v-model="formData.unit"
                @change="changeUnit"
                default-first-option
              >
                <el-option
                  v-for="item in unitOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="6">
          <el-col :span="9" style="display: flex">
            <el-form-item
              label="是否提前提醒"
              label-width="200px"
              prop="preRemind"
            >
              <el-select v-model="formData.preRemind" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提前多久提醒(小时)" prop="preRemindTime">
              <el-select
                v-model="formData.preRemindTime"
                @change="changeUnit"
                default-first-option
              >
                <el-option
                  v-for="item in preRemindTimeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="6">
          <el-col :span="24">
            <el-form-item label-width="200px" prop="preRemindContent">
              <el-input
                type="textarea"
                v-model="formData.preRemindContent"
                clearable
                placeholder="请输入提前提醒内容,不输入则使用系统默认"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="6">
          <el-col :span="12">
            <el-form-item
              label="预约成功马上发送通知"
              label-width="200px"
              prop="sendImmediate"
            >
              <el-select v-model="formData.sendImmediate" placeholder="请选择">
                <el-option
                  v-for="item in sendImmediateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="6">
          <el-col :span="24">
            <el-form-item label-width="200px" prop="sendImmediateContent">
              <el-input
                type="textarea"
                clearable
                v-model="formData.sendImmediateContent"
                placeholder="请输入预约成功发送给家长的内容,不输入则使用系统默认"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="6">
          <el-col :span="24">
            <el-form-item label="预约说明" label-width="200px" prop="remark">
              <el-input
                type="textarea"
                clearable
                v-model="formData.remark"
                placeholder="请输入备注,不输入则使用系统默认"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="6">
          <el-col :span="24">
            <el-form-item
              size="large"
              style="display: flex; justify-content: center"
            >
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetAddForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import {
  listFree_time,
  getFree_time,
  addFree_time,
  updateFree_time,
  delFree_time,
} from "@/api/doctor/free_time";

export default {
  components: {},
  props: [],
  created() {
    this.dateRange.push(this.getDisDate(0));
    this.dateRange.push(this.getDisDate(28));
  },
  data() {
    return {
      formData: {
        noHoliday: 1,
        numLimit: 1,
        unit: 30,
        preRemind: "是",
        preRemindTime: 20,
        preRemindContent: "",
        sendImmediate: "是",
        sendImmediateContent: "",
        remark: "",
      },
      dateRange: [],
      morning: ["07:00", "12:00"],
      afternoon: ["14:00", "17:00"],
      unitOptions: [
        {
          value: "10",
          label: "10",
        },
        {
          value: "15",
          label: "15",
        },
        {
          value: "20",
          label: "20",
        },
        {
          value: "30",
          label: "30",
        },
        {
          value: "60",
          label: "60",
        },
        {
          value: "120",
          label: "120",
        },
      ],
      options: [
        {
          value: "是",
          label: "是",
        },
        {
          value: "否",
          label: "否",
        },
      ],
      sendImmediateOptions: [
        {
          value: "是",
          label: "是",
        },
        {
          value: "否",
          label: "否",
        },
      ],
      preRemindTimeOptions: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
        {
          value: "5",
          label: "5",
        },
        {
          value: "10",
          label: "10",
        },
        {
          value: "20",
          label: "20",
        },
        {
          value: "30",
          label: "30",
        },
        {
          value: "40",
          label: "40",
        },
      ],
      rules: {
        // dateRange: [
        //   {
        //     required: true,
        //     message: "日期范围不能为空",
        //     trigger: ["change","blur"],
        //   },
        // ],
      },
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    submitForm() {
      if (this.dateRange && this.dateRange.length > 1) {
        this.formData.dateRange1 = this.dateRange[0];
        this.formData.dateRange2 = this.dateRange[1];
      } else {
        this.$message.warning("日期范围不能为空");
        return;
      }
      if (this.morning && this.morning.length > 1) {
        this.formData.morning1 = this.morning[0];
        this.formData.morning2 = this.morning[1];
        var hh = this.morning[1].substring(0, 2);
        var mm = this.morning[1].substring(3, 5);
        if (hh > 12 || (hh == 12 && mm > 0)) {
          return this.$message.warning("上午时间小于12:00");
        }
      } else {
        this.formData.morning1 = "";
        this.formData.morning2 = "";
      }
      if (this.afternoon && this.afternoon.length > 1) {
        this.formData.afternoon1 = this.afternoon[0];
        this.formData.afternoon2 = this.afternoon[1];
        var h = this.afternoon[0].substring(0, 2);
        var m = this.afternoon[0].substring(3, 5);
        if (h < 12) {
          return this.$message.warning("下午时间大于12:00");
        }
      } else {
        this.formData.afternoon1 = "";
        this.formData.afternoon2 = "";
      }
      this.formData.preRemind = this.formData.preRemind == "是" ? 1 : 0;
      this.formData.sendImmediate = this.formData.sendImmediate == "是" ? 1 : 0;
      addFree_time(this.formData).then((response) => {
        this.$modal.msgSuccess("设置空闲时间成功");
      });
    },
    resetAddForm() {
      this.$refs["elForm"].resetFields(() => {
        this.morning = ["07:00:00", "12:00:00"];
        this.afternoon = ["14:00:00", "17:00:00"];
        this.dateRange.push(this.getDisDate(0));
        this.dateRange.push(this.getDisDate(28));
      });
    },
    changeUnit() {
      console.log(this.formData.unit);
    },
    change() {
      console.log(this.formData.noHoliday);
    },
  },
};
</script>
<style>
</style>
